<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
    <script src="vue.js"></script>

    <title>Document</title>
    <style>
        main {
            width: 1000px;
            height: 400px;
            margin: 100px auto;
        }

        div {
            border: 1px solid black;
        }

        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        table {
            margin: 20px 0;
        }

        td {
            width: 140px;
            text-align: center;
        }

        fieldset {
            width: 1000px;
            margin: 20px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <main id="app">
        <table>
            <tr>
                <th>ID</th>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
                <th>操作</th>
            </tr>

            <tr v-for='(book,index) in bookList'>
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.author}}</td>
                <td>{{book.price}}</td>
                <td><input @click="dian(index)" type="button" value="删除"></td>
            </tr>
        </table>
        <fieldset>
            <legend>添加新书</legend>
            <p>书名：<input v-model="newBook.name" type="text"></p>
            <p>作者：<input v-model="newBook.author" type="text"></p>
            <p>价格：<input v-model="newBook.price" type="text"></p>
            <!-- 点击增加，即将newBook增添到bookList里面 -->
            <p><button @click="add">添加</button></p>
        </fieldset>

    </main>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                bookList: [
                    { id: 1, name: '三国演义', author: '罗贯中', price: 88.88 },
                    { id: 2, name: '红楼梦', author: '曹雪芹', price: 88.88 },
                    { id: 3, name: '水浒传', author: '施耐庵', price: 88.88 },
                    { id: 4, name: '西游记', author: '吴承恩', price: 88.88 },
                ],
                newBook: {
                    id: 0,
                    name: '',
                    author: "",
                    price: '',
                }
            },
            methods: {
                dian: function (index) {
                    // splice 从指定位置开始剪切
                    // 剪切指定个数
                    // 输出点击索引
                    console.log(index)
                    this.bookList.splice(index, 1);//删除
                },
                add: function () {
                    var maxId = 0;
                    //找出最大ID
                    for (var i = 0; i < this.bookList.length; i++) {
                        if (maxId < this.bookList[i].id) {
                            maxId = this.bookList[i].id;
                        }
                    }
                    this.newBook.id = maxId + 1;
                    this.bookList.push(this.newBook);//追加
                    this.newBook = {};//清空
                }


            }
        })
    </script>
</body>

</html>